<template>
  <div class="homeBox">
    <center>
      {{type[typeIndex].text}}
        <el-slider
          v-model="typeIndex"
          :step="1"
          :min="0"
          :max="3"
          style="width:400px"
        >
        </el-slider>
      <div id="chartPie" class="pie-wrap"></div>
      <div id="chartLine" class="line-wrap"></div>
    </center>
  </div>
</template>

<script>
import * as echarts from 'echarts';

require('echarts/theme/shine');//引入主题
require('echarts/theme/macarons');//引入主题
export default {
  data() {
    return {
      chartPie: null,
      chartLine: null,
      /***
       * @商品销量占比范围
       */
      type: [{
        id: 1,
        text: "近一周"
      }, {
        id: 2,
        text: "近一个月"
      }, {
        id: 3,
        text: "近一年"
      }, {
        id: 4,
        text: "所有"
      },
      ],
      typeIndex: 0,
      /**
       * @圆饼图内容
       * */
      circleDate: '',
      controller: "OrderVo",
      /**
       * @折线图内容
       * */
      LineDate: '',
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawPieChart();
      this.drawLineChart();
    })
  },
  watch: {
    typeIndex:function(val){
      this.loadCircle();
      this.loadLine();
    }
  },
  created() {
    this.loadCircle();
    this.loadLine();
  },
  methods: {
    /**
     * @导入折线图
     * */
    loadLine() {
      let _this = this;
      this.axios.get(this.$store.state.baseURL + 'client/' + this.controller + '/getOrderBrokenLine?' + 'OperatorId=' + this.$store.state.operator.mid + '&type=' + this.type[this.typeIndex].id)
        .then(res => {
          _this.LineDate = res.data;
          this.drawLineChart();
          //console.log(res.data);
        })
    },
    /**
     * @获取折线数组
     * */
    getLineArray() {
      let sum = [];
      let ans = [];
      let temp = {};
      temp.name = "商品销售量";
      temp.type = "line";
      temp.stack = "总量";
      for (let i = 0; i < this.LineDate.length; i++) {
        sum.push(this.LineDate[i].number);
      }
      temp.data = sum;
      ans.push(temp);
      //console.log(ans)
      return sum;
    },
    /**
     * @获取时间列表
     * */
    getLineTime() {
      let sum = [];
      for (let i = 0; i < this.LineDate.length; i++) {
        sum.push(this.LineDate[i].date);
      }
      return sum;
    },
    drawLineChart() {
      this.chartLine = echarts.init(document.getElementById('chartLine'), 'macarons');// 基于准备好的dom，初始化echarts实例
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['商品销量折线变化图']
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false
            },
            data: this.getLineTime()
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            name: '（件）'
          }
        ],
        series: [
          {
            name: '销量详情',
            type: 'line',
            stack: '总量',
            smooth: true,
            lineStyle: {
              width: 4
            },
            areaStyle: {
              normal: {
                color: '#275F82' //改变区域颜色
              }
            },
            data: this.getLineArray()
          }
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      this.chartLine.setOption(option);
    },
    /**
     * @导入圆饼图
     * */
    loadCircle() {
      let _this = this;
      this.axios.get(this.$store.state.baseURL + 'client/' + this.controller + '/getGoodsVoCircle?' + 'OperatorId=' + this.$store.state.operator.mid + '&type=' + this.type[this.typeIndex].id)
        .then(res => {
          _this.circleDate = res.data;
          this.drawPieChart();
          //console.log(res.data);
        })
    },
    /**
     * @获取商品数组
     * */
    getCircleArray() {
      let sum = [];
      for (let i = 0; i < this.circleDate.length; i++) {
        let temp = {};
        temp.value = this.circleDate[i].number;
        temp.name = this.circleDate[i].goods.name;
        sum.push(temp);
      }
      return sum;
    },
    /**
     * @获取圆饼图的商品名字数组
     * */
    getCircleName() {
      let sum = [];
      for (let i = 0; i < this.circleDate.length; i++) {
        sum.push(this.circleDate[i].goods);
      }
      return sum;
    },
    /**
     * @获取全部商品数量
     * */
    getCircleSum() {
      let sum = 0;
      for (let i = 0; i < this.circleDate.length; i++) {
        sum += this.circleDate[i].number;
      }
      return sum;
    },
    drawPieChart() {
      let mytextStyle = {
        color: "#333",
        fontSize: 18,
      };
      let mylabel = {
        show: true,
        position: "right",
        offset: [30, 40],
        formatter: '{b} : {c} ({d}%)',
        textStyle: mytextStyle
      };
      this.chartPie = echarts.init(document.getElementById('chartPie'), 'macarons');
      this.chartPie.setOption({
        title: {
          text: '商品销量占比',
          subtext: this.type[this.typeIndex].text,
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          data: this.getCircleName(),
          left: "center",
          top: "bottom",
          orient: "horizontal",
        },
        series: [
          {
            name: '销量占比',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            data: this.getCircleArray(),
            animationEasing: 'cubicInOut',
            animationDuration: this.getCircleSum(),
            label: {
              emphasis: mylabel
            }
          }
        ]
      });
    }
  }
}
</script>
<style>
.pie-wrap {
  width: 100%;
  height: 400px;
}

.line-wrap {
  width: 100%;
  height: 400px;
}

.homeBox {
  background-color: #ffffff;
}
</style>
